<%@ Page Language="c#" CodeBehind="EditForm.aspx.cs" AutoEventWireup="True" Inherits="FormsGenerator.EditForm"
    CodePage="65001" %>

<%@ Register TagPrefix="uc1" TagName="ShowHelp" Src="Controls/ShowHelp.ascx" %>
<%@ Register TagPrefix="uc1" TagName="TopBanner" Src="Controls/TopBanner.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>EditForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Styles/Default.css" type="text/css" rel="stylesheet" />

    <script language="javascript" type="text/javascript">		
		var selectedCell = "";
		var selectedObject;
		var menuTimer;
		function showContainer(parObject, parID, parHelpText, parMenuId)
		{	
			var container = document.getElementById(parMenuId);		
			var ie5menu = document.getElementById("ie5menu");		
			if (container != null)
			{
				ie5menucontent.innerHTML = container.innerHTML;
				
				if (selectedObject != parObject)
				{					
					closeMenus();
				}
				/*
				if (parObject.innerHTML == "")
				{
					parObject.className = "ContainerEmpty";
				}
				else
				{
					parObject.className = "ContainerVisible";
				}
				*/
				parObject.style.borderColor = "#1111DD";
				selectedCell = parID;
				selectedObject = parObject;
				
				if (ie5menu != null)
				{
					if (ie5menu.style.visibility != "visible" && parHelpText != "" )
					{				
						showHelpBox('helpBox', 'helptext', '' + parHelpText );
					}
				}		
			}							
		}
		
		function hideContainer()
		{
			var ie5menu = document.getElementById("ie5menu");					
			if (ie5menu != null && ie5menu.style.visibility == "visible")
			{
				menuTimer = setTimeout( "closeMenus()", 50 );	
			}
			else
			{
				if (selectedObject != null)
				{
					//selectedObject.className = "ContainerHidden";
					selectedObject.style.borderColor = "#FFFFFF";
					selectedObject = null;
					selectedCell = "";
				}
			}
			hideHelpBox('helpBox');
		}
		
		function closeMenus()
		{
			if (selectedObject != null)				
			{
				//selectedObject.className = "ContainerHidden";
				selectedObject.style.borderColor = "#FFFFFF";;
				selectedObject = null;
			}
			selectedCell = "";			
			hidemenuie5();
		}
		
		function addItem()
		{
			//alert("Adding item at: " + selectedCell);
			var editElementWindow = window.open('EditElement.aspx?id=<%= "" + ViewState["Guid"] %>&page=<%= "" + pageNumber %>&position=' + selectedCell, 'EditElement', 'toolbar=no,titlebar=no,resizable=yes,width=600,height=500,scrollbars=yes');
			editElementWindow.focus();
		}
		
		function addItemAfterSelected()
		{
			//alert("Adding item at: " + selectedCell);
			var arrNewPosition = selectedCell.split("_");
			arrNewPosition[2] = 0;
			selectedCell = arrNewPosition.join("_");			
			var editElementWindow = window.open('EditElement.aspx?id=<%= "" + ViewState["Guid"] %>&page=<%= "" + pageNumber %>&position=' + selectedCell, 'EditElement', 'toolbar=no,titlebar=no,resizable=yes,width=600,height=500,scrollbars=yes');
			editElementWindow.focus();
		}
		
		function editItem()
		{
			//alert("Editing item at: " + selectedCell);
			var editElementWindow = window.open('EditElement.aspx?id=<%= "" + ViewState["Guid"] %>&page=<%= "" + pageNumber %>&position=' + selectedCell, 'EditElement', 'toolbar=no,titlebar=no,resizable=yes,width=600,height=500,scrollbars=yes');
			editElementWindow.focus();
		}
		
		function deleteItem()
		{
			if (confirm("Are you sure you want to delete the item..."))
			{
				document.EditForm.selectedItem.value = selectedCell;
				return true;
			}
			else
			{
				return false;
			}
		}
		
		function editColumn()
		{
			var editColumnWindow = window.open('CellProperties.aspx?id=<%= "" + ViewState["Guid"] %>&page=<%= "" + pageNumber %>&position=' + selectedCell, 'CellProperties', 'toolbar=no,titlebar=no,resizable=yes,width=450,height=150,scrollbars=yes');
			editColumnWindow.focus();
		}
		
		function mouseEnter(theElement)
		{    
			theElement.style.cursor = "move";
		}

		function mouseClick(theElement)
		{			
			if(window.event.button==1)
			{
				var dragOK = theElement.dragDrop();			
			}
		}
		
		function mouseOut(theElement)
		{
			//Nothing here
		}
		
		function startDrag()
		{			
			// post the data for Windows:
			var dragData = window.event.dataTransfer;

			// set the type of data for the clipboard:
			dragData.setData('Text', window.event.srcElement.id);

			// allow only dragging that involves moving the object:
			dragData.effectAllowed = 'linkMove';

			// use the special 'move' cursor when dragging:
			dragData.dropEffect = 'move';
			hideHelpBox('helpBox');			
			changeDropZones(true);
		}
		
		function changeDropZones(blnTurnOn)
		{
			var objDropZones = document.getElementsByTagName("span")
			var strDropZones = "";
			if (objDropZones!=null)
			{
				for (i=0;i<objDropZones.length;i++)
				{
					if (objDropZones[i].name == "dropzone")
					{						
						if(blnTurnOn)
						{
							objDropZones[i].className = "Dropzone_visible";
						}
						else
						{
							objDropZones[i].className = "Dropzone";
						}
					}
				}
			}
		}

		function enterDrag(dropzone) 
		{
			// allow target object to read clipboard:
			window.event.dataTransfer.getData('Text');
			dropzone.className = "Dropzone_active";
		}

		function leaveDrag(dropzone) 
		{
			// allow target object to read clipboard:    
			dropzone.className = "Dropzone_visible";
		}

		function endDrag() 
		{
			// when done remove clipboard data
			window.event.dataTransfer.clearData();
			changeDropZones(false);
		}

		function overDrag() 
		{
			// tell onOverDrag handler not to do anything:
			window.event.returnValue = false;
		}

		function drop(dropzone) 
		{
			// eliminate default action of ondrop so we can customize:
			var blnMoveOK = true;
			window.event.returnValue = false;
			var arrPosition = dropzone.id.split("_");
			var arrSelectPosition = selectedCell.split("_");
			//check if moving to same place:
			if (arrSelectPosition[0] == arrPosition[1] && arrSelectPosition[1] == arrPosition[2])
			{
				var behindPos = arrSelectPosition[2]++;
				//moving to same position or right after same position is not possible:
				if( behindPos == arrPosition[3] || arrSelectPosition[2] == arrPosition[3])
				{
					blnMoveOK = false;
				}
			}
			
			if (blnMoveOK)			
			{
				if (confirm("Are you sure you want to move the item to \n" + 
							"Row: " + arrPosition[1] + "\n" +
							"Column: " + arrPosition[2] + "\n" +
							"Position: " + arrPosition[3] + " ?"))
				{
					document.EditForm.selectedItem.value = selectedCell;
					document.EditForm.dropZoneID.value = arrPosition[1] + "_" + arrPosition[2] + "_" + arrPosition[3];
					__doPostBack('LinkButtonMoveItem','');
				}
			}
		}
		
    </script>

    <script language="javascript" type="text/javascript">
		// Web Site:  http://www.dynamicdrive.com 

		// This script and many more are available free online at
		// The JavaScript Source!! http://javascript.internet.com 

		
		var menuskin = "skin1"; // skin0, or skin1
		var display_url = 0; // Show URLs in status bar?
		
		function showmenuie5() 
		{
			if (selectedCell != "")
			{
				hideHelpBox('helpBox');
				//Placing the menu
				var rightedge = document.body.clientWidth-event.clientX;
				var bottomedge = document.body.clientHeight-event.clientY;
				if (rightedge < ie5menu.offsetWidth)
					ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
				else
					ie5menu.style.left = document.body.scrollLeft + event.clientX;
				
				if (bottomedge < ie5menu.offsetHeight)
					ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
				else
					ie5menu.style.top = document.body.scrollTop + event.clientY;
				
				ie5menu.style.visibility = "visible";
				//Hiding selects				
				var selects = document.getElementsByTagName("select");
				for (var i = 0; i < selects.length; i++)
				{					
					var theSelect = selects[i];
					if ( theSelect.offsetLeft > ie5menu.offsetLeft - 80 &&  theSelect.offsetLeft < ie5menu.offsetLeft + ie5menu.offsetWidth &&
						theSelect.offsetTop > ie5menu.offsetTop - 25 && theSelect.offsetTop < ie5menu.offsetTop + ie5menu.offsetHeight + 35 && 
						window.event.srcElement.uniqueID != theSelect.uniqueID )
					{
						theSelect.style.visibility = "hidden";
					}
				}			
				return false;
			}
		}
		
		function hidemenuie5() 
		{
			ie5menu.style.visibility = "hidden";
			var selects = document.getElementsByTagName("select");
			for (var i = 0; i < selects.length; i++)
			{					
				var theSelect = selects[i];
				if (theSelect.style.visibility == "hidden")
				{
					theSelect.style.visibility = "visible";			
				}
			}
		}
		
		function highlightie5() 
		{
			if (event.srcElement.className == "menuitems" || event.srcElement.className == "aspmenuitems") 
			{
				event.srcElement.style.backgroundColor = "highlight";
				event.srcElement.style.color = "white";
				if (display_url)
					window.status = event.srcElement.url;
			}
		}
		
		function lowlightie5() 
		{
			if (event.srcElement.className == "menuitems" || event.srcElement.className == "aspmenuitems") 
			{
				event.srcElement.style.backgroundColor = "";
				event.srcElement.style.color = "black";
				window.status = "";
			}
		}
		
		function jumptoie5() 
		{
			if (event.srcElement.className == "menuitems") 
			{
				if (event.srcElement.getAttribute("target") != null)
					window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
				else
					window.location = event.srcElement.url;
			}
		}
		
    </script>

</head>
<body>
    <form id="EditForm" method="post" runat="server">
    <input type="hidden" name="selectedItem" />
    <input type="hidden" name="dropZoneID" />
    <uc1:TopBanner ID="theTopBanner" runat="server"></uc1:TopBanner>
    <asp:Label ID="LabelErrorMessage" runat="server" ForeColor="Red" Visible="False"
        CssClass="ErrorMessage" EnableViewState="False"></asp:Label><asp:ValidationSummary
            ID="ValidationSummary1" runat="server" HeaderText="Please fill in mandatory fields">
        </asp:ValidationSummary>
    <div class="PanelHeader">
        Form Properties:</div>
    <asp:Panel ID="PanelFormHeaderPanel" runat="server" CssClass="Panel" Width="100%">
        <table width="100%">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td valign="top" rowspan="3">
                    &nbsp;
                </td>
                <td align="right">
                    ID:
                    <asp:Label ID="LabelID" runat="server">[Auto generated]</asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="LabelName" runat="server" CssClass="MandatoryLabel">Name: </asp:Label>
                    <asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Name"
                        ControlToValidate="TextBoxName" Display="Dynamic">*</asp:RequiredFieldValidator>&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td align="right">
                    <asp:Button ID="ButtonFormPropertiesUpdate" runat="server" Text="Save" OnClick="ButtonFormPropertiesUpdate_Click">
                    </asp:Button>
                    <asp:Button ID="ButtonSaveAndReturn" runat="server" Visible="<%# ButtonSaveAndReturnVisible %>"
                        CausesValidation="False" Text="Return" OnClick="ButtonSaveAndReturn_Click"></asp:Button>
                    <input type="button" id="InputButtonClose" runat="server" visible="<%# ButtonCloseVisible %>"
                        causesvalidation="False" value="Close" onclick="window.close();" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Panel ID="PanelNumberOfPages" runat="server">
                        <asp:Label ID="LabelNumOfPages" runat="server">Number of Pages: </asp:Label>
                        <asp:TextBox ID="TextBoxNumOfPages" runat="server" Width="22px" MaxLength="2"></asp:TextBox>
                        <asp:RangeValidator ID="RangeValidator2" runat="server" ErrorMessage="Number of Pages must be between 1 and 99"
                            ControlToValidate="TextBoxNumOfPages" Display="Dynamic" Type="Integer" MinimumValue="1"
                            MaximumValue="99">*</asp:RangeValidator>
                    </asp:Panel>
                </td>
                <td align="right">
                    <input id="ButtonPreview" disabled type="button" value="Preview Form" runat="server">
                    <input id="ButtonViewSource" disabled type="button" value="View Source" runat="server">
                </td>
            </tr>
        </table>
    </asp:Panel>
    <div class="PanelHeader">
        Paging:</div>
    <asp:Panel ID="PanelPages" runat="server" Visible="False" CssClass="Panel">
        <div style="display: inline-block;">
            <div style="float: left; height: 30px;">
                <asp:Label ID="LabelPaging" runat="server" EnableViewState="False"></asp:Label><br />
                <br />
                <asp:LinkButton ID="LinkButtonDeletePage" runat="server" CssClass="DeletePage" CausesValidation="False"
                    OnClick="LinkButtonDeletePage_Click">Delete current page</asp:LinkButton><br />
            </div>
            <asp:Panel ID="PanelAddPage" runat="server" Visible="False" Style="float: right;
                text-align: right;">
                <asp:Label ID="LabelAddPage" runat="server">Insert Page </asp:Label>
                <asp:DropDownList ID="DropDownListAddPage" runat="server">
                </asp:DropDownList>
                <asp:Button ID="ButtonAddPage" runat="server" CausesValidation="False" Text="Insert Page"
                    Enabled="False" OnClick="ButtonAddPage_Click"></asp:Button>
            </asp:Panel>
        </div>
    </asp:Panel>
    <div class="PanelHeader">
        The Form:</div>
    <asp:Panel ID="PanelTheForm" runat="server" Visible="False" CssClass="Panel" Width="100%">
        <table width="100%">
            <tr>
                <td>
                    <asp:Label ID="LabelNumOfCols" runat="server" CssClass="MandatoryLabel">Number of Columns: </asp:Label>
                    <asp:TextBox ID="TextBoxNumOfCols" runat="server" Width="22px" MaxLength="1"></asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="Number of Columns must be between 1 and 9"
                        ControlToValidate="TextBoxNumOfCols" Display="Dynamic" Type="Integer" MinimumValue="1"
                        MaximumValue="9">*</asp:RangeValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Number of Columns"
                        ControlToValidate="TextBoxNumOfCols" Display="Dynamic">*</asp:RequiredFieldValidator>
                    <asp:Button ID="ButtonUpdateColumns" runat="server" Text="Update" OnClick="ButtonUpdateColumns_Click">
                    </asp:Button>
                </td>
                <td valign="bottom" align="center">
                    <br />
                </td>
                <td align="right">
                    <asp:Label ID="LabelInsertRow" runat="server">Insert Row </asp:Label>
                    <asp:DropDownList ID="DropDownListInsertRow" runat="server">
                    </asp:DropDownList>
                    <asp:Button ID="ButtonInsert" runat="server" Text="Insert" Enabled="False" OnClick="ButtonInsert_Click">
                    </asp:Button>
                </td>
            </tr>
        </table>
        <asp:Table ID="TableFormDesign" runat="server" EnableViewState="False" CssClass="FormDesignerTable"
            CellPadding="4" CellSpacing="0">
            <asp:TableRow ID="TableFormDesignHeader" CssClass="FormDesignerTable">
            </asp:TableRow>
        </asp:Table>
        <br />
    </asp:Panel>
    <asp:Label ID="LabelDebug" runat="server" EnableViewState="False" Visible="False"></asp:Label>
    <p>
        <uc1:ShowHelp ID="ShowHelp" runat="server"></uc1:ShowHelp>
        <asp:PlaceHolder ID="PlaceHolderDeleteButtons" runat="server" Visible="False"></asp:PlaceHolder>
        <asp:LinkButton ID="LinkButtonMoveItem" runat="server" OnClick="LinkButtonMoveItem_Click"></asp:LinkButton><br />
    </p>
    <p>
        <asp:Panel ID="PanelInstructions" runat="server" CssClass="Instructions" Width="100%">
            <asp:Panel ID="PanelInstructions1" runat="server" Visible="false" Width="100%">
                <ul>
                    <li>Fill in <b>name</b> and number of pages and click the "Save" button
                        <li>Mandatory fields are marked <b>bold</b> </li>
                </ul>
            </asp:Panel>
            <asp:Panel ID="PanelInstructions2" runat="server" Visible="false" Width="100%">
                <ul>
                    <li>To change the <b>name</b> of the form, edit the name in the name field and click
                        the "Save" button
                        <li>To change the number of <b>columns</b>, edit the number of columns field and click
                            the "Save" button
                            <li>To <b>insert a page</b>, choose from the dropdown above and click the "Insert page"
                                button
                                <li>To <b>insert a row</b>, choose from the dropdown above at right and click the "Insert"
                                    button next to the dropdown. You must first specify number of columns before inserting
                                    rows.&nbsp;
                                    <li>To <b>add a new item</b>, move your mouse to the cell you want to insert the item
                                        in and click the right mouse button. Select "Add item..." from the list
                                        <li>To <b>edit an item</b>, move your mouse over the item you want to edit and click
                                            the right mouse button. Select "Edit item..." from the list
                                            <li>You can <b>move an item</b> by dragging the item and dropping it in one of the dropzones.&nbsp;The
                                                dropzones are highlighted when dragging the item&nbsp;
                                                <li>To <b>delete an item</b>, move your mouse over the item you want to delete and click
                                                    the right mouse button. Select "Delete item..." from the list
                                                    <li>You can <b>edit the cells properties </b>by right clicking an item in the cell and
                                                        selecting "Edit column..." from the list. The options you have are <b>alignment</b>
                                                        and <b>columnspan</b>.
                                                        <li>To <strong>navigate between the pages</strong>, click the arrows or the pagenumber
                                                            directly.
                                                            <li>When you are done with the form, click the "Return" button to go back to the forms
                                                                listing page and unlock it there. </li>
                </ul>
            </asp:Panel>
        </asp:Panel>
        <p>
        </p>
        <div class="skin0" onmousemove="highlightie5();" id="ie5menu" onmouseover="clearTimeout(menuTimer);highlightie5();"
            onclick="jumptoie5();" onmouseout="lowlightie5();hideContainer();">
            <div id="ie5menucontent">
            </div>
        </div>
        <div id="existingItemMenu" style="visibility: hidden">
            <div class="menuitems" url="javascript:editItem();">
                Edit item...</div>
            <div class="menuitems" url="javascript:addItemAfterSelected();">
                Add new item in cell...</div>
            <hr class="menuhr">
            <asp:LinkButton class="aspmenuitems" ID="deleteItem" runat="server" OnClick="deleteItem_Click">Delete Item...</asp:LinkButton>
            <hr class="menuhr">
            <div class="menuitems" url="javascript:editColumn();">
                Edit&nbsp;cell properties...</div>
        </div>
        <div id="emptyItemMenu" style="visibility: hidden">
            <div class="menuitems" url="javascript:addItem();">
                Add item...</div>
            <hr class="menuhr">
            <div class="menuitems" url="javascript:editColumn();">
                Edit cell properties...</div>
        </div>

        <script language="javascript" type="text/javascript">
			if (document.all && window.print) 
			{		
				ie5menu.className = menuskin;
				document.oncontextmenu = showmenuie5;
				document.body.onclick = hidemenuie5;
			}
        </script>
    </form>
</body>
</html>
